<template>
	<div class="branch-wrap">
		<div class="branch-box-wrap">
			<div class="branch-box" style="margin-bottom: 15px">
				<el-button class="add-branch" color="#626aef" plain round @click="addTerm"> 添加分支 </el-button>
				<div v-for="(item, index) in nodeConfig.parallelNodes" :key="index" class="col-box">
					<div class="condition-node">
						<div class="condition-node-box">
							<div class="auto-judge" @click="show(index)">
								<div v-if="index != 0" class="sort-left" @click.stop="arrTransfer(index, -1)">
									<el-icon><ArrowLeft /></el-icon>
								</div>
								<div class="title">
									<span style="display: inline-block; width: 115px"><le-text class="flex-1" tag="b" :value="item.nodeName" /></span>
									<div class="close">
										<el-icon class="mx-1" @click.stop="copyTerm(index)">
											<CopyDocument />
										</el-icon>
										<el-icon @click.stop="delTerm(index)">
											<Close />
										</el-icon>
									</div>
								</div>
								<div class="content">
									<span class="placeholder"> 并行任务（同时进行） </span>
								</div>
								<div v-if="index != nodeConfig.parallelNodes.length - 1" class="sort-right" @click.stop="arrTransfer(index)">
									<el-icon><ArrowRight /></el-icon>
								</div>
							</div>
							<add-node v-model="item.childNode"></add-node>
						</div>
					</div>
					<slot v-if="item.childNode" :node="item"></slot>
					<div v-if="index == 0" class="top-left-cover-line"></div>
					<div v-if="index == 0" class="bottom-left-cover-line"></div>
					<div v-if="index == nodeConfig.parallelNodes.length - 1" class="top-right-cover-line"></div>
					<div v-if="index == nodeConfig.parallelNodes.length - 1" class="bottom-right-cover-line"></div>
				</div>
				<div class="svg-icon-box">
					<svg-icon style="font-size: 18px" color="#626aef" icon-class="flow-paraller-branch" />
				</div>
			</div>
			<add-node v-model="nodeConfig.childNode"></add-node>
		</div>
		<el-drawer v-model="drawer" title="条件设置" destroy-on-close append-to-body :size="600">
			<template #header>
				<div class="node-wrap-drawer__title">
					<label v-if="!isEditTitle" @click="editTitle">
						{{ form.nodeName }}<el-icon class="node-wrap-drawer__title-edit"><Edit /></el-icon>
					</label>
					<el-input
						v-if="isEditTitle"
						ref="nodeTitle"
						v-model="form.nodeName"
						clearable
						class="w-40"
						@blur="saveTitle"
						@keyup.enter="saveTitle"
					></el-input>
					<el-input v-model="form.nodeKey" clearable class="w-40 pl-1.5" placeholder="请填写nodeKey"></el-input>
				</div>
			</template>
		</el-drawer>
	</div>
</template>

<script>
import addNode from './addNode.vue'
import { Delete, Plus, ArrowLeft, Close, ArrowRight, Edit } from '@element-plus/icons-vue'
import { getNodeKey } from '@/utils/workflow'
import _ from 'lodash-es'
export default {
	components: {
		addNode
	},
	props: {
		modelValue: { type: Object, default: () => {} }
	},
	data() {
		return {
			nodeConfig: {},
			drawer: false,
			isEditTitle: false,
			index: 0,
			form: {}
		}
	},
	computed: {
		Plus() {
			return Plus
		}
	},
	watch: {
		modelValue() {
			this.nodeConfig = this.modelValue
		}
	},
	mounted() {
		this.nodeConfig = this.modelValue
	},
	methods: {
		show(index) {
			const self = this
			this.index = index
			this.form = {}
			this.form = _.cloneDeep(self.nodeConfig.parallelNodes[index])
			this.drawer = true
		},
		editTitle() {
			this.isEditTitle = true
			this.$nextTick(() => {
				this.$refs.nodeTitle.focus()
			})
		},
		saveTitle() {
			this.isEditTitle = false
		},
		save() {
			this.nodeConfig.parallelNodes[this.index] = this.form
			this.$emit('update:modelValue', this.nodeConfig)
			this.drawer = false
		},
		addTerm() {
			let len = this.nodeConfig.parallelNodes.length + 1
			this.nodeConfig.parallelNodes.push({
				nodeName: '分支' + len,
				type: 3,
				nodeKey: getNodeKey(),
				priorityLevel: len,
				conditionMode: 1,
				conditionList: []
			})
		},
		delTerm(index) {
			this.nodeConfig.parallelNodes.splice(index, 1)
			if (this.nodeConfig.parallelNodes.length == 1) {
				if (this.nodeConfig.childNode) {
					if (this.nodeConfig.parallelNodes[0].childNode) {
						this.reData(this.nodeConfig.parallelNodes[0].childNode, this.nodeConfig.childNode)
					} else {
						this.nodeConfig.parallelNodes[0].childNode = this.nodeConfig.childNode
					}
				}
				this.$emit('update:modelValue', this.nodeConfig.parallelNodes[0].childNode)
			}
		},
		// 复制分支
		copyTerm(index) {
			const self = this
			let len = this.nodeConfig.parallelNodes.length + 1
			const currentNode = _.cloneDeep(self.nodeConfig.parallelNodes[index])
			const item = {
				...currentNode,
				nodeKey: getNodeKey(),
				nodeName: currentNode.nodeName + '-Copy',
				priorityLevel: len
			}
			this.nodeConfig.parallelNodes.push(item)
			this.$emit('update:modelValue', this.nodeConfig)
		},
		reData(data, addData) {
			if (!data.childNode) {
				data.childNode = addData
			} else {
				this.reData(data.childNode, addData)
			}
		},
		arrTransfer(index, type = 1) {
			this.nodeConfig.parallelNodes[index] = this.nodeConfig.parallelNodes.splice(index + type, 1, this.nodeConfig.parallelNodes[index])[0]
			this.nodeConfig.parallelNodes.map((item, index) => {
				item.priorityLevel = index + 1
			})
			this.$emit('update:modelValue', this.nodeConfig)
		},
		addConditionList(conditionList) {
			conditionList.push({
				label: '',
				field: '',
				operator: '=',
				value: ''
			})
		},
		deleteConditionList(conditionList, index) {
			conditionList.splice(index, 1)
		},
		addConditionGroup() {
			this.addConditionList(this.form.conditionList[this.form.conditionList.push([]) - 1])
		},
		deleteConditionGroup(index) {
			this.form.conditionList.splice(index, 1)
		}
	}
}
</script>

<style scoped lang="scss">
.top-tips {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	color: #646a73;
}

.or-branch-link-tip {
	margin: 10px 0;
	color: #646a73;
}

.condition-group-editor {
	user-select: none;
	border-radius: 4px;
	border: 1px solid #e4e5e7;
	position: relative;
	margin-bottom: 16px;

	.branch-delete-icon {
		font-size: 18px;
	}

	.header {
		background-color: #f4f6f8;
		padding: 0 12px;
		font-size: 14px;
		color: #171e31;
		height: 36px;
		display: flex;
		align-items: center;

		span {
			flex: 1;
		}
	}

	.main-content {
		padding: 0 12px;

		.condition-relation {
			color: #9ca2a9;
			display: flex;
			align-items: center;
			height: 36px;
			display: flex;
			justify-content: space-between;
			padding: 0 2px;
		}

		.condition-content-box {
			display: flex;
			justify-content: space-between;
			align-items: center;

			div {
				width: 100%;
				min-width: 120px;
			}

			div:not(:first-child) {
				margin-left: 16px;
			}
		}

		.cell-box {
			div {
				padding: 16px 0;
				width: 100%;
				min-width: 120px;
				color: #909399;
				font-size: 14px;
				font-weight: 600;
				text-align: center;
			}
		}

		.condition-content {
			display: flex;
			flex-direction: column;

			:deep(.el-input__wrapper) {
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
			}

			.content {
				flex: 1;
				padding: 0 0 4px 0;
				display: flex;
				align-items: center;
				min-height: 31.6px;
				flex-wrap: wrap;
			}
		}
	}

	.sub-content {
		padding: 12px;
	}
}
</style>
